<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-title">
      <text class="title-text">炫酷动画效果展示</text>
      <text class="subtitle-text">探索各种动画可能性</text>
    </view>

    <!-- 动画效果展示区 -->
    <view class="animation-container">
      <!-- 旋转动画 -->
      <view class="animation-card">
        <view class="animation-title">旋转动画</view>
        <view class="animation-demo rotation-demo">
          <view class="rotation-box"></view>
        </view>
        <view class="animation-description">
          360°持续旋转效果，可调整速度和方向
        </view>
      </view>

      <!-- 平移动画 -->
      <view class="animation-card">
        <view class="animation-title">平移动画</view>
        <view class="animation-demo translation-demo">
          <view class="translation-box"></view>
        </view>
        <view class="animation-description">
          水平方向往复平移，带有缓动效果
        </view>
      </view>

      <!-- 缩放动画 -->
      <view class="animation-card">
        <view class="animation-title">缩放动画</view>
        <view class="animation-demo scale-demo">
          <view class="scale-box"></view>
        </view>
        <view class="animation-description">
          大小缩放循环动画，可用于强调元素
        </view>
      </view>

      <!-- 透明度动画 -->
      <view class="animation-card">
        <view class="animation-title">透明度动画</view>
        <view class="animation-demo opacity-demo">
          <view class="opacity-box"></view>
        </view>
        <view class="animation-description">
          淡入淡出效果，常用于元素显示隐藏
        </view>
      </view>

      <!-- 组合动画 -->
      <view class="animation-card">
        <view class="animation-title">组合动画</view>
        <view class="animation-demo combination-demo">
          <view class="combination-box"></view>
        </view>
        <view class="animation-description">
          旋转+缩放+平移的组合效果
        </view>
      </view>

      <!-- 加载动画1 -->
      <view class="animation-card">
        <view class="animation-title">加载动画 - 圆圈</view>
        <view class="animation-demo loading-demo">
          <view class="loader-circle">
            <view class="circle"></view>
            <view class="circle"></view>
            <view class="circle"></view>
          </view>
        </view>
        <view class="animation-description">
          经典的圆形加载指示器
        </view>
      </view>

      <!-- 加载动画2 -->
      <view class="animation-card">
        <view class="animation-title">加载动画 - 脉冲</view>
        <view class="animation-demo loading-demo">
          <view class="loader-pulse"></view>
        </view>
        <view class="animation-description">
          脉冲效果加载指示器
        </view>
      </view>

      <!-- 加载动画3 -->
      <view class="animation-card">
        <view class="animation-title">加载动画 - 进度条</view>
        <view class="animation-demo progress-demo">
          <view class="progress-bar">
            <view class="progress-fill"></view>
          </view>
        </view>
        <view class="animation-description">
          进度条样式加载动画
        </view>
      </view>

      <!-- 点击触发动画 -->
      <view class="animation-card">
        <view class="animation-title">交互动画</view>
        <view class="animation-demo interaction-demo">
          <button class="interactive-button" :class="{ 'button-active': isButtonActive }"
            @click="toggleButtonAnimation">
            点击我
          </button>
        </view>
        <view class="animation-description">
          点击触发的弹跳和颜色变化动画
        </view>
      </view>

      <!-- 骨架屏动画 -->
      <view class="animation-card">
        <view class="animation-title">骨架屏加载</view>
        <view class="animation-demo skeleton-demo">
          <view class="skeleton-container">
            <view class="skeleton-avatar"></view>
            <view class="skeleton-line"></view>
            <view class="skeleton-line short"></view>
          </view>
        </view>
        <view class="animation-description">
          内容加载前的骨架屏占位动画
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';

  // 交互动画状态管理
  const isButtonActive = ref(false);

  // 触发按钮动画
  const toggleButtonAnimation = () => {
    isButtonActive.value = true;
    // 动画结束后重置状态
    setTimeout(() => {
      isButtonActive.value = false;
    }, 600);
  };
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f7fa;
    padding: 20rpx;
  }

  /* 页面标题样式 */
  .page-title {
    text-align: center;
    margin: 40rpx 0 60rpx;
  }

  .title-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }

  .subtitle-text {
    font-size: 24rpx;
    color: #666;
  }

  /* 动画容器样式 */
  .animation-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340rpx, 1fr));
    gap: 30rpx;
  }

  /* 动画卡片样式 */
  .animation-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .animation-card:hover {
    transform: translateY(-5rpx);
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
  }

  .animation-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 15rpx;
    border-bottom: 1px solid #f0f0f0;
  }

  .animation-demo {
    width: 100%;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #fafafa;
    border-radius: 10rpx;
  }

  .animation-description {
    font-size: 22rpx;
    color: #666;
    line-height: 1.5;
  }

  /* 旋转动画 */
  .rotation-box {
    width: 100rpx;
    height: 100rpx;
    background-color: #409eff;
    border-radius: 10rpx;
    animation: rotate 2s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  /* 平移动画 */
  .translation-box {
    width: 100rpx;
    height: 100rpx;
    background-color: #67c23a;
    border-radius: 10rpx;
    animation: translate 2s ease-in-out infinite;
  }

  @keyframes translate {

    0%,
    100% {
      transform: translateX(-100rpx);
    }

    50% {
      transform: translateX(100rpx);
    }
  }

  /* 缩放动画 */
  .scale-box {
    width: 100rpx;
    height: 100rpx;
    background-color: #e6a23c;
    border-radius: 10rpx;
    animation: scale 1.5s ease-in-out infinite;
  }

  @keyframes scale {

    0%,
    100% {
      transform: scale(0.8);
    }

    50% {
      transform: scale(1.2);
    }
  }

  /* 透明度动画 */
  .opacity-box {
    width: 100rpx;
    height: 100rpx;
    background-color: #f56c6c;
    border-radius: 10rpx;
    animation: opacity 2s ease-in-out infinite;
  }

  @keyframes opacity {

    0%,
    100% {
      opacity: 0.4;
    }

    50% {
      opacity: 1;
    }
  }

  /* 组合动画 */
  .combination-box {
    width: 100rpx;
    height: 100rpx;
    background-color: #909399;
    border-radius: 10rpx;
    animation: combination 3s ease-in-out infinite;
  }

  @keyframes combination {
    0% {
      transform: translate(-80rpx, 0) rotate(0deg) scale(0.8);
      opacity: 0.6;
    }

    25% {
      transform: translate(0, -60rpx) rotate(90deg) scale(1.1);
      opacity: 1;
    }

    50% {
      transform: translate(80rpx, 0) rotate(180deg) scale(0.8);
      opacity: 0.6;
    }

    75% {
      transform: translate(0, 60rpx) rotate(270deg) scale(1.1);
      opacity: 1;
    }

    100% {
      transform: translate(-80rpx, 0) rotate(360deg) scale(0.8);
      opacity: 0.6;
    }
  }

  /* 圆形加载动画 */
  .loader-circle {
    display: flex;
    gap: 15rpx;
  }

  .loader-circle .circle {
    width: 25rpx;
    height: 25rpx;
    border-radius: 50%;
    background-color: #409eff;
  }

  .loader-circle .circle:nth-child(1) {
    animation: bounce 1s ease-in-out infinite 0ms;
  }

  .loader-circle .circle:nth-child(2) {
    animation: bounce 1s ease-in-out infinite 150ms;
  }

  .loader-circle .circle:nth-child(3) {
    animation: bounce 1s ease-in-out infinite 300ms;
  }

  @keyframes bounce {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-30rpx);
    }
  }

  /* 脉冲加载动画 */
  .loader-pulse {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #67c23a;
    animation: pulse 1.5s ease-in-out infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }

    50% {
      transform: scale(1.2);
      opacity: 0.6;
    }

    100% {
      transform: scale(0.8);
      opacity: 1;
    }
  }

  /* 进度条加载动画 */
  .progress-bar {
    width: 240rpx;
    height: 15rpx;
    background-color: #f0f0f0;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    width: 60%;
    background-color: #f56c6c;
    border-radius: 10rpx;
    animation: progress 1.5s ease-in-out infinite;
  }

  @keyframes progress {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(300%);
    }
  }

  /* 交互按钮动画 */
  .interactive-button {
    padding: 20rpx 40rpx;
    background-color: #909399;
    color: white;
    border: none;
    border-radius: 60rpx;
    font-size: 28rpx;
    transition: all 0.3s ease;
  }

  .interactive-button.button-active {
    animation: button-bounce 0.6s ease;
    background-color: #409eff;
  }

  @keyframes button-bounce {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }

  /* 骨架屏动画 */
  .skeleton-container {
    width: 280rpx;
  }

  .skeleton-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #e9e9e9;
    margin-bottom: 20rpx;
    animation: shimmer 1.5s infinite;
  }

  .skeleton-line {
    height: 15rpx;
    background-color: #e9e9e9;
    margin-bottom: 15rpx;
    border-radius: 8rpx;
    animation: shimmer 1.5s infinite;
  }

  .skeleton-line.short {
    width: 70%;
    animation-delay: 0.2s;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
      background-image: linear-gradient(90deg, #e9e9e9 0%, #f5f5f5 50%, #e9e9e9 100%);
      background-size: 200% 100%;
    }

    100% {
      background-position: 200% 0;
      background-image: linear-gradient(90deg, #e9e9e9 0%, #f5f5f5 50%, #e9e9e9 100%);
      background-size: 200% 100%;
    }
  }
</style>